<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- 新 Bootstrap4 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
  </style>
  <title>校园网登录界面</title>
</head>

<body>
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

  <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <div class="container" style="padding: 10% 20%;">
    <form method="POST" action="/home/login">
      <div class="form-group">
        <label for="exampleInputEmail1">Username:</label>
        <input type="username" class="form-control form-control-sm" name="username" id="exampleInputEmail1"
          aria-describedby="emailHelp">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password:</label>
        <input type="password" class="form-control form-control-sm" name="password" id="exampleInputPassword1">
      </div>
      <button type="submit" class="btn btn-primary btn-sm">Submit</button>
    </form>
  </div>
</body>
<script>

  $('form').on('submit', function () {

    if ($('#exampleInputEmail1').val().trim().length == 0) {
      alert('账号不能为空')
      return false;
    }
    if ($('#exampleInputPassword1').val().trim().length == 0) {
      alert('密码不能为空')
      return false;
    }
  })
</script>

</html>